<template>
	<div class="home">
		<div class="home__top">
			<div style="display: flex;">
				<div class="home__top__btn" v-for='(item,index) in btnlist' :key="index">{{item.text}}</div>
				
			</div>
			<div style="display: flex;align-items: center;">
				<!-- <div>
					<el-checkbox label="带后缀"></el-checkbox>
					<el-checkbox label="显示对应流程单数量"></el-checkbox>
				</div>
				<div class="home__top__btn"
					style="justify-self: flex-end;background-color: #909399;color: #FFFFFF;margin-left: 20px;">
					亲.请开始
				</div> -->
				<!-- <img src="~@/assets/icon.png" class="icon" alt="" /> -->
			</div>
		</div>
		<div class="home__con">
			<div ref="form" style="display: flex;justify-content: space-between;">
				<div style="display: flex;align-items: center;flex-wrap: wrap;">
					<el-input placeholder="" suffix-icon="el-icon-date" placeholder="全部" v-model="form.lz">
						<template slot="prepend">离职 ：</template>
					</el-input>
					<el-input placeholder="" suffix-icon="el-icon-date" placeholder="所有类别" v-model="form.lb">
						<template slot="prepend">类别 ：</template>
					</el-input>
					<el-input placeholder="" suffix-icon="el-icon-date" placeholder="所有部门" v-model="form.bm">
						<template slot="prepend">部门 ：</template>
					</el-input>
					<el-input placeholder="" suffix-icon="el-icon-date" placeholder="请选择" v-model="form.xm">
						<template slot="prepend">姓名 ：</template>
					</el-input>
					<el-input placeholder="" class="yf" suffix-icon="el-icon-date" placeholder="2024-01-21至2024-01-31 " v-model="form.yf">
						<template slot="prepend">月份 ：</template>
					</el-input>
					<el-input placeholder="" placeholder="请输入" v-model="form.je">
						<template slot="prepend">金额 ：</template>
					</el-input>
					
					
				</div>
				<div class="jzr">
					结帐日:2024-01-20
				</div>
			</div>
			<el-table border :data="tableData" stripe style="width: 100%"
				:height="`calc(100% - ${footerh}px - ${formH}px)`"
				:header-cell-style='{background:"#F9F9F9",color:"#1F163A",textAlign:"center"}'
				:cell-style="{color:'#1F163A',textAlign:'center'}">
				<el-table-column type="index" label="序" width="76">
				</el-table-column>
				<el-table-column prop="zh" label="编码" width="103">
				</el-table-column>
				<el-table-column prop="wym" label="姓名" width="200">
				</el-table-column>
				<el-table-column prop="tm" label="人员类别" width="100">
				</el-table-column>
				<el-table-column prop="ys" label="基本工" width="91">
				</el-table-column>
				<el-table-column prop="cm" label="计件工资" width="90">
				</el-table-column>
				<el-table-column prop="js" label="加班工资" width="100">
				</el-table-column>
				<el-table-column prop="ce" label="部门" width="200">
				</el-table-column>
				<el-table-column prop="shrq" label="备注" width="200">
				</el-table-column>
				<el-table-column prop="bm" label="APP控制" width="200">
				</el-table-column>
				<el-table-column prop="cm" label="计件工资" width="90">
				</el-table-column>
				<el-table-column prop="js" label="加班工资" width="100">
				</el-table-column>
				<el-table-column prop="ce" label="部门" width="200">
				</el-table-column>
				<el-table-column prop="shrq" label="备注" width="200">
				</el-table-column>
				<el-table-column prop="bm" label="APP控制" width="200">
				</el-table-column>
			</el-table>
			<!-- <div class="hj"
				style="height: 49px;background: #F9F9F9;display: flex;align-items: center;justify-content: flex-end;color: #1F163A;">
				合计：件数26 差额0
			</div> -->
			<div class="footer" ref="footer">
				<div>
					总共2 条记录
				</div>
				<el-pagination background small layout="prev, pager, next,jumper" :total="328">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					lz:'',
					lb:'',
					bm:'',
					xm:"",
					yf:'',
					je:""
				},
				btnlist: [{
					text: '批量调整'
				}, {
					text: '删除条码'
				}, {
					text: '生产流水'
				}, {
					text: '打印纸菲'
				}, {
					text: '内部码'
				}, {
					text: '定义列名'
				}, {
					text: '汇总情况'
				}, {
					text: '生成仓库单'
				}, {
					text: '发送加工'
				}, {
					text: '加工进度'
				}, {
					text: '完工推送*0 '
				}, {
					text: '调生产通知单'
				}, ],
				tableData: [{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},
					{
							zh: 10002,
							wym: 10002,
							tm: '总经办',
							ys: "14",
							cm: "2",
							js: 0,
							ce: '新厂隔壁3楼(贴朋)',
							shrq: '无',
							bm: "无",
						},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},{
						zh: 10002,
						wym: 10002,
						tm: '总经办',
						ys: "14",
						cm: "2",
						js: 0,
						ce: '新厂隔壁3楼(贴朋)',
						shrq: '无',
						bm: "无",
					},
				],
				footerh: 67,
				formH: 42
			}
		},
		created() {
			// this.
		},
		mounted() {
			this.footerh = this.$refs.footer.offsetHeight
			this.formH = this.$refs.form.offsetHeight
			console.log(this.formH)
			let _this = this
			window.onresize = function() {
				_this.formH = _this.$refs.form.offsetHeight
				// console.log(_this.$refs.form.offsetHeight)
			};
		},
	}
</script>
<style scoped>
	.home {
		background-color: #fff;
		height: calc(100% - 26px);
		border-radius: 5px;
		padding: 13px 10px;

	}

	.home__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.home__top__btn {
		cursor: pointer;
		padding: 0 18px;
		height: 50px;
		line-height: 50px;
		background-color: rgba(74, 119, 246, .5);
		color: #231918;
		font-size: 15px;
		margin-right: 1px;
	}

	.home__con {
		margin-top: 10px;
		height: calc(100% - 50px);
	}

	.box {
		width: 60px;
		height: 22px;
		border-radius: 3px;
		text-align: center;
		line-height: 22px;
		color: #fff;
	}

	.footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1F163A;
		padding: 24px 48px;
	}

	.bz {
		display: flex;

	}

	.hj {
		font-size: 19px;
		padding-right: 40px;
	}

	/deep/.el-input__inner {
		width: 135px;
		padding-left: 10px;
	}

	.el-input {
		width: fit-content;
		margin-right: 20px;
		margin-bottom: 20px;
	}

	/deep/.el-input-group__prepend {
		padding: 0 10px;
	}

	/deep/.el-input__icon {
		width: 20px;
	}

	/deep/.el-input--suffix .el-input__inner {
		padding-right: 20px;
	}
	/deep/.yf .el-input__inner {
		width: 240px;
	}
	/deep/.bz .el-input {
		width: 100%;
		display: flex;
		/* padding-left: 10px; */
	}
	/deep/.bz .el-input .el-input__inner{
		width: 100%;
	}
	/deep/.bz .el-input .el-input-group__prepend{
		width: fit-content;
		display: flex;
		align-items: center;
	}
	.bz{
		display: flex;
		flex: 1;
	}
	.icon{
		width: 42px;
		height: 36px;
		align-self: flex-end;
	}
	.jzr{
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 15px;
		color: #1E173C;
		line-height: 15px;
		justify-self: flex-end;
		align-self: flex-start;
	}
</style>